<template>
  <el-form :model="form" :rules="rules" label-width="80px">
    <el-form-item label="账号" prop="username">
      <span>{{ form.username }}</span>
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { reactive } from "vue";
  const form = reactive({
    username: "",
    password: "",
  });
  const rules = reactive({
    username: [{ required: true, message: "请输入账号", trigger: blur }],
  });

  const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log("submit!");
      } else {
        console.log("error submit!", fields);
      }
    });
  };
</script>

<style></style>
